﻿<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CSS修饰文本域及按钮</title>
    <style type="text/css">
      *{
       margin:0;
       padding:0;
       color:black;
       text-decotration:none;
      }
     
      .box{
         margin:0 auto;
         width:1200px;
         height:64px;
       }

       .box input{
         width:480px;
         height:20px;
         padding:12px 16px;
         border:2px solid #cccccc;
         border-radius:10px 0 0 10px;
       }
      .box input:hover{
         border:2px solid  #aaaaaa;
       }
      .box button{
         color:#ffffff;
         padding:0 24px;
         line-height:28px;
         height:50px;
         border:none;
         margin-left:-6px;
         background-color:#4e6ef2;
         border-radius:0 10px 10px 0;
       }
    </style>
</head>
<body>
    <div class="box">
      <input type="text">
      <button>百度一下</button>
   </div>
</body>
</html>